<!DOCTYPE html>
<html lang="zh_CN">
<head>
<#-- 包含其他文件的内容 -->
    <#include "../common/header.ftl"/>
    <script src="/js/plugins/jqueryForm/jquery.form.js"></script>
    <script src="/js/plugins/ckeditor/ckeditor.js"></script>
</head>
<body>

<div class="container " style="margin-top: 20px">
    <#include "../common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
        <#-- 往数据模型中填充一个属性 -->
            <#assign menu="product"/>
            <#include "../common/menu.ftl"/>
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">商品管理
                    </h1>
                </div>
            </div>
            <!--高级查询--->
            <form class="form-inline" id="searchForm" action="/product/list.do" method="post">
                <input type="hidden" name="currentPage" id="currentPage" value="1">
                <input type="text" class="form-control" name="keyword" value="${(qo.keyword)!}">
                <input type="submit" value="查询">
                <button type="button" class="btn-info inputBtn">添加</button>
            </form>

            <table class="table table-striped table-hover">
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>商品分类</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            <#-- 循环迭代指令 -->
                <#list pageInfo.list as entity>
                    <tr>
                        <td>${entity_index + 1}</td>
                        <td>${entity.title}</td>
                        <td>${entity.price} </td>
                        <td>${entity.sort.getName()}</td>
                        <td>${entity.stateName}</td>
                        <td><#--当前按钮中绑定自定义属性,内容是当前数据的json字符串-->
                            <a class="btn btn-info btn-xs inputBtn" role="button" data-json='${entity.json}'>
                                <span class="glyphicon glyphicon-pencil"></span>编辑
                            </a>
                            <a data-url="/product/delete.do?id=${entity.id}"
                               class="btn btn-danger btn-xs deleteBtn">
                                <span class="glyphicon glyphicon-trash"></span>删除
                            </a>
                            <button class="showContent" data-tid="${entity.id}">查看详情</button>
                        </td>
                    </tr>
                </#list>
            </table>
            <#include "../common/page.ftl"/>
        </div>
    </div>
</div>
<div class="modal fade" id="productModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/product/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">名称：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="title">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">价格：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="price">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label">分类：</label>
                        <div class="col-sm-6">
                            <select id="sort" name="sort.id" class="form-control">
                                <option value="-1"></option>
                                <#list sorts as s>
                                    <option value="${s.id}">${s.name}</option>
                                </#list>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label">状态：</label>
                        <div class="col-sm-6">
                            <select name="state" class="form-control">
                                <option value="0">上架</option>
                                <option value="1">推荐</option>
                                <option value="-1">下架</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group imgUrl ">
                        <label class="col-sm-2 control-label">封面：</label>
                        <div class="col-sm-3  fileBtn">
                            <span class="btn btn-success">选择文件</span>
                        </div>
                        <div class="col-sm-3  fileBtn">
                            <span class="btn btn-success">选择文件</span>
                        </div>
                        <div class="col-sm-3  fileBtn">
                            <span class="btn btn-success">选择文件</span>
                            <input type="hidden" name="imgUrl">
                        </div>

                    </div>

                    <input type="hidden" name="productContent.content">
                    <textarea id="editor1" rows="10" cols="80">

                     </textarea>

                    <script>
                        CKEDITOR.replace('editor1');
                    </script>


                </form>
                <form id="fileForm" action="/images/xx.do" method="post" enctype="multipart/form-data"/>
                <input id="fileBtn" type="file" class="form-control" name="file" style="display: none" accept="image/*">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    <span class="glyphicon glyphicon-off"></span> 关闭
                </button>
                <button type="button" class="btn btn-primary submitBtn">
                    <span class="glyphicon glyphicon-saved"></span> 保存
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="contentModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">商品详情</h4>
            </div>
            <div class="modal-body" id="modalBody">

            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>

</div>


<script>

    //给删除按钮绑定点击事件
    $(".deleteBtn").click(function () {
        var url = $(this).data("url");
        $.messager.confirm("温馨提示", "亲,确定要删除吗?", function () {
            $.get(url, function (data) {
                //记得使用分页合理化
                reload();
            });
        });
    });

    //查看文章
    $(".showContent").click(function () {
        var id =$(this).data("tid");
        $.get("/product/getProductContentById.do",{id:id},function (data) {
            $("#modalBody").html(data.content);
            console.log($("#modalBody"));

            $("#contentModal").modal("show")
        })
    });

    var img;
    //模态框中的选择文件按钮
    $(".fileBtn").click(function () {
        img = $(this);
        $("#fileForm input[name='file']").click();
    });
    //提交图片后把图片显示到原图片的位置
    $("#fileForm input[name='file']").change(function () {
        if ($(this).val()) {
            $("#fileForm").ajaxSubmit(function (data) {
                console.log(data);
                img.html('<img src="' + data.url + '" width="100%">');
            })
        }

    });


    //提交按钮
    $(".submitBtn").click(function () {

        var imgArr = $(".imgUrl img");
        var temp = "";
        for (var i = 0; i < imgArr.length; i++) {
            temp += $(imgArr[i]).attr("src") + ";";
            console.log("temp1:" + temp);
        }
        console.log("temp2:" + temp);

        $("#editForm input[name='imgUrl']").val(temp);
        $("#editForm input[name='productContent.content']").val(CKEDITOR.instances.editor1.getData());
        $("#editForm").ajaxSubmit(function (data) {
            if (data.success) {
                reload();
            } else {
                $.messager.alert(data.msg);
            }
        })

    })

    //编辑/新增绑定点击事件
    $(".inputBtn").click(function () {

        var json = $(this).data("json");
        console.log(json);
        if (json) {
            $.get('/product/getProductContentById.do', {id: json.id}, function (data) {
                CKEDITOR.instances.editor1.setData(data.content);
            })
            $(".imgUrl .fileBtn img").attr("src","")
            $("#editForm input[name='title']").val(json.title);
            $("#editForm input[name='price']").val(json.price);
            $("#editForm input[name='id']").val(json.id);
            $("#editForm select[name='sort.id']").val(json.sortId);
            $("#editForm select[name='state']").val(json.state);
            var imgArr = json.imgUrl.split(";");
            for (var i = 0; i < imgArr.length; i++) {
                var arrImg=$(".imgUrl .fileBtn");
                var temp=imgArr[i];
                var arr=('<img src="'+temp+'" width="100%">');
                if(temp!=null){
                    $(arrImg[i]).append(arr);
                }
            }
        } else {
            $("#editForm input,#editForm select").val("");
            $("#editForm select[name='catalog.id']").html("");
            $(".imgUrl .fileBtn img").attr("src","");
            CKEDITOR.instances.editor1.setData("");
        }
        $("#productModal").modal("show");
    });


</script>
</body>
</html>